@import "reset.less";
@import "fnList.less";
@import "varList.less";

html,
body {
    background-color: #edf1f2;
}

@{header} {
    .width();
    .flex();
    .flex-justify();
    .flexible(30/2, font-size);
    .flex-align();
    .padding-space(10, 0);
    background-color: #1448AE;

    a {

        .block();


        &:first-of-type {
            .inline-block();
            margin-left: 0.1rem;
            .flexible(0, font-size);
            .fn-px-rem(width, 50);
            .fn-px-rem(height, 50);
            background: url(../images/icon/sprites.png) no-repeat -0.44rem -0.12rem;
            .backgroundSize(3.75rem, 4.57rem);

        }

        &:nth-child(2) {
            .flexible(40/2, font-size);
            .font-weight();
            margin-right: 0.1rem;
            .color(rgb(253, 253, 253));
        }
    }
}

@{section} {
    // padding-bottom: 0.rem;
    padding:0.2rem 0.1rem 0.5rem 0.1rem;
    .width();
    max-width: 3.5rem;
    .margin(0);
    .flexible(16, font-size);

    article {
        .fill-txt {
            .flex();
            .flex-justify();
            align-items: flex-end;

            a {
                .flexible(14, font-size);
                .color(#888d94);
            }

            div {
                .color(#bec2c6);

                p {
                    .flexible(14, font-size);
                    .padding-space(5, 0);

                    &:nth-child(1) {
                        .color(#888d94);
                        .flexible(20, font-size);
                    }

                    i {
                        .flexible(16, font-size);
                        .font-weight();
                    }
                }


            }
        }

        .fill-chunk {
            .margin-space(15, 0);
            // border: 1px solid saddlebrown;
            width : 100%;
            height: 1.15rem;
            .flex();
            background-color: white;
            border-radius   : 5px;

            .going {

                // border: 1px solid rgb(3, 143, 236);
                .padding-space(15, 10);
                .flex();
                .width();
                justify-content: space-around;

                .trip-left {
                    margin-top: 0.05rem;
                    width     : 0.37rem;
                    height    : 0.37rem;
                    .inline-block();
                    .background("vg.png");
                    background-size: 100% 100%;
                }

                div {
                    // padding-left: 0.1rem;
                    width: 80%;
                    .flexible(14, font-size);

                    p {
                        padding: 0.05rem 0.05rem;

                        &:nth-child(1) {
                            .color(#888d94);
                            .flexible(20, font-size);
                        }

                        &:nth-child(2) {
                            .flexible(14, font-size);
                            .color(#bec2c6);
                            /* 强制不换行 */
                            white-space  : nowrap;
                            /* 设置溢出文本隐藏 ，显示省略号 */
                            overflow     : hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                .trip-reight {
                    margin-top: 0.11rem;
                    width     : 0.11rem;
                    height    : 0.18rem;
                    .inline-block();
                    .background("tt.png");
                    background-size: 100% 100%;

                }
            }
        }

        .fill-two {
            .width();
            height          : 2rem;
            // border          : 1px solid red;
            background-color: white;
            .color(#888d94);
       
            .going-two {
                .margin-space(25, 10);
                .flex();
                padding-top: 0.12rem;
                justify-content: space-around;

                .go-left {
                    .inline-block();
                    width        : 0.23rem;
                    height       : 0.23rem;
                    border-radius: 50%;
                    .textalign();
                    line-height: 0.20rem;
                    .flexible(12, font-size);
                    border: 2px solid rgba(127, 127, 127, 0.4);
                }

                p {
                    width: 80%;
                }

                .go-reight {
                    .inline-block();
                    width : 0.11rem;
                    height: 0.18rem;
                    .background("tt.png");
                    background-size: 100% 100%;
                    //    border: 1px solid springgreen;
                }
            }

            .fl {
                width: 80%;
                .margin(20);

                // border: 1px solid saddlebrown;
                p {
                    .padding-space(5, 0);
                    white-space  : nowrap;
                    /* 设置溢出文本隐藏 ，显示省略号 */
                    overflow     : hidden;
                    text-overflow: ellipsis;

                    &:nth-child(1) {
                        .flexible(12, font-size);
                        .color(#888d94);
                        white-space  : nowrap;
                        /* 设置溢出文本隐藏 ，显示省略号 */
                        overflow     : hidden;
                        text-overflow: ellipsis;
                    }

                    a {
                        .color(#19AFD9);
                    }
                }
            }
        }

        .fill-three {
            .width();
            height          : 1.29rem;
            // border          : 1px solid burlywood;
            background-color: white;
            .color(#888d94);
            .margin-space(15, 0);
        }

        .message {
            .margin-space(15, 10);
            .flex();
            padding-top:0.2rem;
            justify-content: space-around;

            .mes-left {
                margin-top: 0.05rem;
                width     : 0.37rem;
                height    : 0.37rem;
                .inline-block();
                .background("bb.png");
                background-size: 100% 100%;

            }

            div {
                width: 80%;

                p {
                    .margin-space(10, 0);

                    &:nth-child(1) {
                        .flexible(14, font-size);
                        .color(#888d94);
                    }

                    &:nth-child(2) {
                        white-space  : nowrap;
                        /* 设置溢出文本隐藏 ，显示省略号 */
                        overflow     : hidden;
                        text-overflow: ellipsis;
                        line-height  : 0.25rem;
                    }
                }
            }

            .mes-reight {
                .color(#CAD7DA);
                margin-top: 0.11rem;
                width     : 0.21rem;
                height    : 0.23rem;
                .inline-block();
                .background("mm.png");
                background-size: 100% 100%;


            }
        }

        .fill-logo {
            width: 100%;

            #ig {
                width   : 100%;
                position: relative;

                img {
                    width: 100%;
                }

                #ticket {
                    // .block();
                    position: absolute;
                    top     : 25%;
                    left    : 32%;
                    .flex();
                    .flex-justify();
                    .flex-align;
                    width: 65%;

                    span {
                        .color(#888d94);
                        .flexible(18, font-size);
                    }

                    i {

                        .inline-block();
                        width : 0.11rem;
                        height: 0.18rem;
                        .background("tt.png");
                        background-size: 100% 100%;
                    }
                }

            }

        }

        .bill {
            .width();
            height          : 1.59rem;
        
            background-color: white;
            .color(#888d94);

            .title {
                    // border          : 1px solid red;
                .margin-space(25, 10);
                padding-top:0.15rem;
                .flex();
                justify-content: space-around;
                .flex-align();

                .title-left {
                    .inline-block();
                    width : 0.37rem;
                    height: 0.37rem;
                    .background("ff.png");
                    background-size: 100% 100%;
                }
                .title-left_i{
                    .inline-block();
                    width : 0.37rem;
                    height: 0.37rem;
                    .background("trip-1.png");
                    background-size: 100% 100%;
                }
                div {
                    width: 80%;

                    p {
                        &:nth-child(1) {
                            .flexible(14, font-size);
                            .color(#A9AAAD);
                        }

                        &:nth-child(2) {
                            .flexible(19, font-size);
                            .color(#888D94);
                        }
                    }
                }

                .title-reight {
                    .inline-block();
                    width : 0.11rem;
                    height: 0.18rem;
                    .background("tt.png");
                    background-size: 100% 100%;
                    //    border: 1px solid springgreen;
                }
            }
        }

        aside{
            // border: 1px solid seagreen;
            .margin-space(15, 10);
            .flexible(14, font-size);
            .color(#A9AAAD);

            .why {
                  display:flex;
                 .padding-space(5,0);
                 line-height: 0.2rem;
                 p img{
                     width:0.12rem;
                     height:0.12rem;
                     margin-right:0.04rem;
                 }
                &::before {
                    position        : absolute;
                    left: -28px;
                    top: 6px;
                    content         : "";
                    clear           : both;
                    // visibility      : visible;
                    width           : 0.13rem;
                    height          : 0.13rem;
                    .background("kkkx.png");
                    background-size: 100% 100%;
                }
                a{
                    color:#7ccfe6;
                }
            }
        }
    }
}

@{footer}{
    .width();
    position     : fixed;
    bottom       : 0rem;
    left         : 0;
    .flexible(30/2, font-size);
    .flex();
    .flex-align();
    text-align: center;
  
    div{
        
        &:nth-child(1){
            width: 60%;
            height: 0.52rem;
            background-color: white;
            line-height: 0.52rem;
            .color(#F1A30F);
            .flexible(20,font-size);
            a{
                .flexible(14,font-size);
                color:black;
            }
        }
        &:nth-child(2){
            width: 40%;
            .flexible(16,font-size);
            height: 0.52rem;
             color:white;
             font-weight: bold;
            line-height: 0.52rem;
            background-color: #F1A30F;
        }
    }
}